import React, { memo,useEffect } from 'react';
import { useDispatch,useSelector,shallowEqual } from 'react-redux';
import {
	HotRecommendWrapper
} from './style';
// 常量的js文件
import {HOT_RECOMMEND_LIMIT} from 'common/contants';
import {getHotRecommendsAction} from '../../store/actionCreators';

import YThemeHeaderRCM from 'components/theme-header-rcm';
import YSongsCover from 'components/songs-cover';

export default memo(function YHotRecommend() {
// state

//redux Hock
const { hotRecommends } = useSelector(state =>({
	// 有一点 没弄清  这个get 是immutable 里的方法 这里没有引 immutable 也是可以用get方法的
	hotRecommends:state.recommend.get('hotRecommends')
}),shallowEqual);
const dispatch = useDispatch();

// Hock
useEffect(() => {
	dispatch(getHotRecommendsAction(HOT_RECOMMEND_LIMIT));
},[dispatch]);

	return (
		<HotRecommendWrapper>
			<YThemeHeaderRCM title="热门推荐" keywords={['华语','流行','民谣','摇滚']}></YThemeHeaderRCM>
			<div className="recommend-list">
				{
				hotRecommends.map((item, index) => {
			return  <YSongsCover key={item.id} info={item}/>
				// hotRecommends
					// return <HYSongsCover key={item.id} info={item}/>
				})
				}
			</div>
		</HotRecommendWrapper>
	)
})
